<template>
  <div class="page">
    <div class="wallet-wrapper">
      <div class="flex-y-center">
        <span class="ballance">2.00</span>
        <el-button plain type="primary" round class="detail-btn" @click="$router.push('/balanceRecord')">余额明细</el-button>
      </div>
      <div class="ballance-text">余额</div>

      <div class="flex withdraw-btn-wrapper">
        <el-button type="primary" class="withdraw-btn" @click="$router.push('/withdraw')">提现</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wallet",

  data() {
    return {
      // state
    };
  },

  methods: {
    // method
  },
};
</script>

<style lang="scss" scoped>
.page {
  .wallet-wrapper {
    padding: 30px 40px;

    .ballance {
      font-weight: normal;
      font-size: 30px;
      color: #333333;
    }

    .detail-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 32px;
      font-size: 18px;
      margin-left: 35px;
    }

    .ballance-text {
      font-weight: normal;
      font-size: 16px;
      color: #000000;
      padding-top: 20px;
    }

    .withdraw-btn-wrapper {
      margin-right: 150px;
      justify-content: flex-end;

      .withdraw-btn {
        width: 250px;
        height: 46px;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }
}
</style>
